Sob Agriculture

Sob - Agriculture & Organic Food HTML5 Template Pack

Created: 25/08/2021
Latest Update: 25/08/2021
by: CodexCoder
email: support@codexcoder.com

Follow the steps below to get started with sob Agriculture & Organic Food HTML Template Pack :

Open the Package/sob-theme Folder to find all the Templates Files
You will need to Upload these files to your Web Server using FTP or cPanle in order to use it on your Website.
Make sure you have upload the required files and folders listed below:
- sob-theme/demos/sob-agriculture/assets - Stylesheets, JavaScript, Fonts etc Folder
- sob-theme/demos/sob-agriculture/assets/images - Images Folder
- sob-theme/index-agriculture-v1.html - Index File/Homepage
The other files can be used according to your preferences.
You're now ready to go..! Start adding your Content and show off your Brand New Website.

HTML5 & CSS3 & jQuery
Modern And Creative Design
Universal menu
100% Responsive
Well documented
Complete SASS files
Bootstrap 5x
Fontawesome Used
Icofonts Used
SwiperSlider Used
Google Font Used
Lightcase Used
Google Map
Eye Catching Design
W3C Valid Code

sob-agriculture has follows a simple coding structure. here is the sample:

						

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Sob Agriculture</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		
		<!-- google fonts -->
		<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
		<link rel="shortcut icon" type="image/x-icon" href="demos/sob-agriculture/assets/images/x-icon/agricul.png">

		<link rel="stylesheet" href="assets/css/plugins/animate.css">
        <link rel="stylesheet" href="assets/css/plugins/icofont.min.css">
        <link rel="stylesheet" href="assets/css/plugins/all.min.css">
        <link rel="stylesheet" href="assets/css/plugins/lightcase.css">
        <link rel="stylesheet" href="assets/css/plugins/swiper-bundle.min.css">
        <link rel="stylesheet" href="assets/css/vendors/bootstrap.min.css">
		<link rel="stylesheet" href="assets/css/preloder.css">
		<link rel="stylesheet" href="assets/css/demo-view.css">
		<link rel="stylesheet" href="demos/sob-agriculture/assets/css/style.min.css">
	</head>

	<body>
		<div class="preloader">
			<div class="preloader-area">
				<h2>Sob <span>Theme</span></h2>
				<div class="loading"></div>
			</div>
		</div>

		<header class="header-section transparent-header">
			<div class="header-area">
				<div class="container">
					<nav class="navbar navbar-expand-lg">
						<div class="primary-menu">
							<div class="logo">
								<a href="../../index-agriculture-v1.html"><img src="demos/sob-agriculture/assets/images/logo/01.png" alt="logo"></a>
							</div>
							<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
								<i class="icofont-navigation-menu"></i>
							</button>
							<div class="collapse navbar-collapse" id="navbarSupportedContent">
								<div class="main-area">
									<div class="main-menu">
										<ul class="agri-ul">
											<li class="active"><a href="#">Home</a>
												<ul class="agri-ul">
													<li class="active"><a href="index-agriculture-v1.html">Home Page One</a></li>
													<li><a href="index-agriculture-v2.html">Home Page Two</a></li>
													<li><a href="index-agriculture-v3.html">Home Page Three</a></li>
												</ul>
											</li>
											<li>
												<a href="#0">Pages</a>
												<ul class="agri-ul">
													<li><a href="demos/sob-agriculture/about.html">About Page</a></li>
													<li>
														<a href="#0">Services Page</a>
														<ul class="agri-ul">
															<li><a href="demos/sob-agriculture/service.html">Services Page</a></li>
															<li><a href="demos/sob-agriculture/service-single.html">Services detalis Page</a></li>
														</ul>
													</li>
													<li><a href="demos/sob-agriculture/team.html">Team Page</a></li>
													<li><a href="demos/sob-agriculture/faq-page.html">Faq Page</a></li>
												</ul>
											</li>
											<li><a href="demos/sob-agriculture/gallery-masonary.html">Gallery</a></li>
											<li>
												<a href="#0">Blog</a>
												<ul>
													<li><a href="demos/sob-agriculture/blog.html">Blog Page</a></li>
													<li><a href="demos/sob-agriculture/blog-single.html">Blog Single Page</a></li>
												</ul>
											</li>
											<li>
												<a href="#0">Shop</a>
												<ul class="agri-ul">
													<li><a href="demos/sob-agriculture/product-page.html">Product</a></li>
													<li><a href="demos/sob-agriculture/product-single.html">Product Single</a></li>
													<li><a href="demos/sob-agriculture/cart-page.html">Cart Page</a></li>
												</ul>
											</li>
											<li><a href="demos/sob-agriculture/contact-us.html">Contact</a></li>
										</ul>
									</div>
									<div class="header-btn">
										<a href="#" class="lab-btn"><span>Get in Touch</span></a>
									</div>
								</div>
							</div>
						</div>
					</nav>
				</div>
			</div>
		</header>

		<a href="#" class="scrollToTop"><i class="icofont-swoosh-up"></i><span class="pluse_1"></span><span class="pluse_2"></span></a>


		<script src="assets/js/vendors/jquery-3.6.0.min.js"></script>
        <script src="assets/js/vendors/modernizr-3.11.2.min.js"></script>
        <script src="assets/js/vendors/bootstrap.bundle.min.js"></script>
        <script src="assets/js/plugins/countdown.min.js"></script>
        <script src="assets/js/plugins/jquery.counterup.min.js"></script>
        <script src="assets/js/plugins/isotope.pkgd.min.js"></script>
        <script src="assets/js/plugins/lightcase.js"></script>
        <script src="assets/js/plugins/swiper-bundle.min.js"></script>
        <script src="assets/js/plugins/wow.min.js"></script>
        <script src="assets/js/plugins/jquery.waypoints.min.js"></script>
        <script src="demos/sob-agriculture/assets/js/functions.js"></script>
		<script src="assets/js/demo-view.js"></script>
	</body>
</html>

We are using several CSS files in this Template. codexcoder Always follow the latest trends of coding standard. Many browser interpret the default behavior of HTML elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

CSS Fiile Included

Animate css used
Bootstrap css used
Lightcase used
Swiper used
ajax used
Favicon used
Fontawesome used
SwiperSlider used
Style.css used
and some other necessary css files

style.css situated on assets/css/ contain the the all necessary custom style which is well organized and following are the style.css file structure :

	 
	
/*! @@@@@@@@@@@@@@@@@@@@@@

Template Name: sob theme
Template URI: https://themeforest.net/user/CodexCoder
Author: CodexCoder
Author URI: https://themeforest.net/user/CodexCoder
Description: Description
Version: 2.0.0
Text Domain: sob-agriculture
Tags: agriculture, agriculture farmer, dairy, dairy farm, eco, eco farm, farm, farmers, farming, health, organic, organic food, organic Products, retail, vegetables

@@@@@@@@@@@@@@@@@@@@@@ */

/* @@@@@@@@@@@@@@@@@@@@@@
>>> TABLE OF CONTENTS START:

01. Normalize CSS
02. Global CSS
03. Header 
	* Style-1
	* Style-2
	* Style-3
	* Mobile Menu
04. Banner 
	* Style-1
	* Style-2
	* Style-3
05. Page Header
  	* Style-1
06. Feature Section
07. About Section
	* Style-1
	* Style-2
	* Style-3
08. Product Section
	* Style-1
	* Style-2
	* Style-3
	* Style-4
	* Grid Style
	* Masonary Style
09. ABS Product
10. Agricul Ffarm Section
11. Agricul Fruits Section
12. Team Member Section
13. Testimonial Section
	* Style-1
	* Style-2
	* Style-3
14. Sponsor Section
15. Newsletter Section
16. Counterup Section
17. Countdown Section
18. Offer Section
19. Contact Section
20. Faq Section
21. Fore Zero
22. Blog
	* Style-1
	* Style-2
	* Blog Single
23. Widget
24. Shop Page
  * Shop Single
  * cart Page
25. Services Page
26. Service Single Page



>>> TABLE OF CONTENTS END:
@@@@@@@@@@@@@@@@@@@@@@ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  box-shadow: none; }
body {
  background: #fff;
  color: #716c80;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 1.5; }
h1, h2, h3, h4, h5, h6 {
  color: #181818;
  font-weight: 700; }
a > h1, a > h2, a > h3, a > h4, a > h5, a > h6 {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease; }
h1 {
  font-size: 72px; }
h2 {
  font-size: 30px; }
h3 {
  font-size: 20px; }
h4 {
  font-size: 20px; }
h5 {
  font-size: 20px;
  margin-top: -5px; }
h6 {
  font-size: 16px; }
p {
  margin-bottom: 15px;
  font-weight: 400;
  font-size: 16px;
  color: #716c80;
  line-height: 24px; }
a {
  color: #181818;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  display: inline-block; }
a:hover, a:focus, a:active, a:visited {
  color: #181818;
  text-decoration: none;
  outline: none; }
img {
  height: auto;
  max-width: 100%; }
@media (min-width: 576px) {
  h1 {
    font-size: 72px;
    line-height: 80px; }
  h2 {
    font-size: 48px;
    line-height: 60px; }
  h3 {
    font-size: 36px;
    line-height: 45px; }
  h4 {
    font-size: 30px;
    line-height: 40px; }
  h5 {
    font-size: 20px;
    line-height: 28px; }
  h6 {
    font-size: 16px;
    line-height: 34px; } }
.agri-ul {
  margin: 0; }
  .agri-ul li {
    list-style: none; }

	 
	
.header-section .header-area.menu-fixed {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 99;
  background: #fff;
  box-shadow: 0 0 3px rgba(81, 136, 136, 0.1); }
.header-section .primary-menu {
  align-items: center;
  justify-content: space-between; }
  .header-section .primary-menu .logo a {
    display: block; }
    .header-section .primary-menu .logo a img {
      display: block; }
  .header-section .primary-menu .main-area {
    align-items: center; }
    .header-section .primary-menu .main-area .main-menu ul {
      padding: 0;
      margin: 0; }
      .header-section .primary-menu .main-area .main-menu ul li {
        padding: 0; }
        .header-section .primary-menu .main-area .main-menu ul li.active 
> a, .header-section .primary-menu .main-area .main-menu ul li:hover > a {
          color: #ffb11f; }
        .header-section .primary-menu .main-area .main-menu ul li a {
          padding: 25px 20px;
          color: #181818;
          font-size: 16px;
          -webkit-transition: all 0.3s ease;
          -moz-transition: all 0.3s ease;
          transition: all 0.3s ease; }
        .header-section .primary-menu .main-area .main-menu ul li ul {
          min-width: 200px;
          background: #ffb11f;
          box-shadow: 0 0 5px rgba(136, 136, 136, 0.1);
          display: block;
          top: 100%;
          transform: scaleY(0);
          transform-origin: top;
          z-index: 999;
          -webkit-transition: all 0.3s ease;
          -moz-transition: all 0.3s ease;
          transition: all 0.3s ease; }
          .header-section .primary-menu .main-area .main-menu ul li ul li a {
            font-size: 98%;
            padding: 10px 15px;
            color: #fff;
            width: 100%;
            border-bottom: 1px solid #ffffff40; }
            .header-section .primary-menu .main-area .main-menu ul li ul li a:hover {
              padding-left: 20px;
              color: #ffb11f;
              background: #fff; }
          .header-section .primary-menu .main-area .main-menu ul li ul li.active
 > a, .header-section .primary-menu .main-area .main-menu ul li ul li:hover > a {
            background: #fff;
            color: #ffb11f; }
          .header-section .primary-menu .main-area .main-menu ul li ul li:last-child a {
            border-bottom: none; }
          .header-section .primary-menu .main-area .main-menu ul li ul li.menu-item-has-children {
            margin-right: 0px; }
            .header-section .primary-menu .main-area .main-menu ul li ul li.menu-item-has-children a::after {
              right: 15px;
              transform: translateY(-50%) rotate(-90deg); }
          .header-section .primary-menu .main-area .main-menu ul li ul li ul {
            left: 100%;
            top: 0; }
        .header-section .primary-menu .main-area .main-menu ul li.menu-item-has-children {
          margin-right: 16px;
          position: relative; }
          .header-section .primary-menu .main-area .main-menu ul li.menu-item-has-children > a::after {
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            font-weight: 400;
            content: "\ea99" !important;
            font-family: IcoFont !important; }
        .header-section .primary-menu .main-area .main-menu ul li:hover > ul {
          transform: scaleY(1); }
    .header-section .primary-menu .main-area .header-btn {
      margin-left: 15px; }
      .header-section .primary-menu .main-area .header-btn .lab-btn {
        display: block;
        padding: 13px 30px; }
.header-section .header-top {
  background: #ffb11f;
  padding: 10px 0; }

We are using several Js files in this Template. codexcoder Always follow the latest trends of coding standard. Many browser interpret the default behavior of HTML elements differently. By using a general reset Js file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

Js Fiile Included

jquery-3.6.0.min.js used
modernizr-3.11.2.js used
bootstrap.bundle.min.js used
countdown.min.js used
jquery.counterup.min.js used
isotope.pkgd.min.js used
lightcase.js used
swiper-bundle.min.js used
wow.min.js used
jquery.waypoints.min.js used
functions.js used
and some other necessary css files

functions.js situated on assets/css/ contain the the all necessary custom style which is well organized and following are the functions.js file structure :

	 
	

	
(function($){
    "use strict";

    $(document).ready(function(){
        // lightcase 
        $('a[data-rel^=lightcase]').lightcase();

        // search cart option
        $(document).on('click','.cart-option',function(){
            $(".cart-option").toggleClass("open");
        });
        $(document).on('click','.search-option, .search-close',function(){
            $(".search-input").toggleClass("open");
        });

        // Header Section Menu Part
        $("ul li ul").parent("li").addClass("menu-item-has-children");
        $(".shop-menu>li .shop-submenu").parent("li").children("a").addClass("dd-icon-down");

        // drop down menu width overflow problem fix
        $('ul').parent().on('hover', function() {
            var menu = $(this).find("ul");
            var menupos = $(menu).offset();
            if (menupos.left + menu.width() > $(window).width()) {
                var newpos = -$(menu).width();
                menu.css({ left: newpos });    
            }
        });

Sob Agriculture

Sob - Agriculture & Organic Food HTML5 Template Pack

Installation

Features At A Glance

HTML Structure

CSS Structure

Js Structure

Credits

jQuery

CSS & Fonts